<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

</head>

<body>
    <div id="app" class="demo">

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <template id="one">
        <br>
        账号：<input v-model="username"> <br>
        密码：<input v-model="password"> <br>
        <button @click="login">点击</button> <br>
    </template>
    <template id="two">
        <button @click="logout">退出登录</button>

        <div>主界面</div>
        <div>主界面</div>
        <div>主界面</div>
        <div style="color: red;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
    <template id="three">
        two----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: palevioletred;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
</body>
<script>

    const oneConfig = {
        template: '#one',
        data() {
            return {
                name: "one",
                age: 11,
                username: '',
                password: '',

            }
        },
        methods: {
            login() {
                console.log("**************");
                if (this.password != '' && this.username != '') {
                    this.isLogin = true;
                }
                if (!this.isLogin) {
                    //注册
                    this.$router.push('/one');
                } else {
                    //主界面
                    this.$router.push('/two');
                }
            },
            logout(){
                
            }
        },
        mounted() {
            this.login();
        }
    };
    const twoConfig = {
        template: '#two',
        data() {
            return {
                name: "two",
                age: 12
            }
        }
    };

    const threeConfig = {
        template: '#three',
        data() {
            return {
                name: "three",
                age: 13
            }
        }
    };
    const HelloVueApp = {
        data() {
            return {
                isLogin: false
            }
        },
        components: {
            one: oneConfig,
            two: twoConfig,
            three: threeConfig
        },
        methods: {
            changeInfo() {
                if (!this.isLogin) {
                    this.$router.push("/one");
                } else {
                    this.$router.push("/two");
                }
            },
            logout() {
                this.isLogin = false;
                changeInfo();
            }
        },
        mounted() {
            this.changeInfo();
        }
    };

    //定义路由
    const routes = [
        { path: '/one', component: oneConfig },
        { path: '/two', component: twoConfig },
        { path: '/three', component: threeConfig },
    ];
    //定义vueRouter对象
    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes
    });
    const app = Vue.createApp(HelloVueApp);
    //使用路由
    app.use(router);
    app.mount('#app');
</script>

</html>